<template>
  <div class="tab-bar">
    <!--
        切换img图标的思路，以home为例
          1：使用v-bind:src动态绑定img的src
          2：使用了三元表达式，如果当前路由的path中包含了/home，src为选中（selected)的图标，否则为正常（normal)的图标，

      切换span样式的思路，以home为例
          1：使用v-bind:class动态绑定span的class
          2：使用了对象绑定方式，如果当前路由的path中包含了/home，即{active:true}，增加active类
      -->
    <!-- <span class="item" :class="{active:ActiveIndex == 'homePage'}" @click="switchTo('homePage')">
        <img :src="tabBarImgArr[0].normal" alt="">
        <span class="txt" >首页</span>
      </span>
      <span class="item" :class="{active:ActiveIndex == 'MyPage'}" @click="switchTo('MyPage')">
        <img :src="tabBarImgArr[1].normal" alt="">
        <span class="txt" >我的</span>
      </span>
      <div class="item" :class="{active:ActiveIndex == 'prizePage'}" @click="switchTo('prizePage')">
        <img :src="tabBarImgArr[2].normal" alt="">
        <span class="txt">奖品</span>
      </div> -->

    <!-- <van-tabbar v-model="active">
      <van-tabbar-item badge="3">
        <span>自定义</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar> -->

    <van-tabbar
      v-model="active"
      active-color="#28292B"
      inactive-color="#999999"
      @change="onChange"
    >
      <van-tabbar-item
        name="home"
        icon="wap-home"
        to="/"
        @click="switchTo('home')"
        >首页
      </van-tabbar-item>
      <van-tabbar-item
        name="goods"
        icon="shop"
        to="/goods"
        @click="switchTo('goods')"
        >商品
      </van-tabbar-item>
      <van-tabbar-item
        icon="chat"
        name="notice"
        to="/notice"
        @click="switchTo('notice')"
        >公告
      </van-tabbar-item>
      <van-tabbar-item
        icon="manager"
        name="personalCenter"
        to="/personalCenter"
        @click="switchTo('personalCenter')"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem, Icon } from "vant";
Vue.use(Tabbar)
  .use(Icon)
  .use(TabbarItem);

export default {
  name: "TabBar",
  data() {
    return {
      active: "home"
      // icon: {
      //   active: "https://img01.yzcdn.cn/vant/user-active.png",
      //   inactive: "https://img01.yzcdn.cn/vant/user-inactive.png"
      // },

      //1.定义底部按钮的图标数组，正常颜色和和选中颜色的
      // tabBarImgArr: [
      //   {
      //     normal: require("@/assets/img/home_tab.png")
      //   },
      //   {
      //     normal: require("@/assets/img/My_tab.png")
      //   },
      //   {
      //     normal: require("@/assets/img/prize_tab.png")
      //   }
      // ]
    };
  },
  props: {
    // ActiveIndex: {
    //   type: String,
    //   default: 'homePage',
    // },
  },

  computed: {
    isTabBar() {
      return this.$store.state.TabBar; //需要监听的数据
    }
  },
  watch: {
    isTabBar(newVal, oldVal) {
      console.log(newVal, "hahahahhahahahhhah");
      this.active = newVal;
    },
    $route(to, from) {
      if (to.path.indexOf("goods") != -1) {
        this.active = "goods";
      } else if (to.path.indexOf("home") != -1) {
        this.active = "home";
      }
    }
  },

  methods: {
    onChange(val) {
      console.log(val, "val切换");
    },
    // //2.切换路由的函数，接收一个参数，该参数为要切换的路径
    switchTo(path) {
      // this.index = path;
      this.$emit("clickTabTag", path);
    }
  },
  mounted() {
    this.active = this.$store.state.TabBar;
  }
};
</script>

<style scoped>
.tab-bar {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  background-color: #3d3884;
  /* border-top: 1px solid #eee; */
  z-index: 99;
}

.tab-bar .item {
  display: flex;
  font-size: 12px;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #000;
  height: 100%;
  padding-top: 6px;
  box-sizing: border-box;
}

/* span标签的选active中样式 */
.tab-bar .active {
  background-color: #871e5e;
}

.tab-bar .item img {
  width: 22px;
  height: 22px;
}

/* 发现图标有点过大了，这里特别设置小一点 */
.tab-bar .item img.exp {
  width: 25px;
}

.tab-bar .item .txt {
  display: inline-block;
  line-height: 23px;
  color: #ffffff;
}
</style>
